<template>
  <view class="login-content">
    <view class="main">
      <h2>
        <view>
          {{ loginText }}
        </view>
        <view @click="changeLogin">
          <text>{{ loginText2 }}</text>
          <image src="../../static/icons/路径 5.png" mode="scaleToFill" />
        </view>
      </h2>
      <view v-if="changeFlag">
        <view class="loginInput">
          <view :class="{ error: errorMobile }"
            ><input
              type="text"
              v-model.number="mobile"
              @blur="verifyMobile"
              placeholder="请输入手机号"
          /></view>
          <view class="toastTitle" :class="{ show: errorMobile }"
            >手机号输入有误，请重新输入</view
          >
          <view class="code" :class="{ error: errorCode }"
            ><input
              type="text"
              @blur="verifyCode"
              v-model.number="code"
              placeholder="请输入验证码"
            />

            <button @click="sendCode">
              {{ buttonText }}
            </button></view
          >
          <view :class="{ show: errorPassword }" class="toastTitle"
            >验证码输入有误，请重新输入</view
          >
        </view>

        <button v-if="!(mobile && code)" class="submit" >
          登录
        </button>
        <button v-else class="submit noEmpty" @click="submitMoblie">
          登录
        </button>
      </view>

      <view v-else>
        <view class="loginInput">
          <view :class="{ error: errorCount }"
            ><input
              @blur="verifyCount"
              v-model="account"
              type="text"
              placeholder="请输入账号"
          /></view>
          <view class="toastTitle" :class="{ show: errorCount }"
            >账号输入有误，请重新输入</view
          >
          <view class="code" :class="{ error: errorPassword }"
            ><input
              @blur="verifyPassword"
              v-model="password"
              :type="pw"
              placeholder="请输入密码"
            />
            <uni-icons @click="changePw" :type="eye" size="30"></uni-icons>
          </view>
          <view :class="{ show: errorPassword }" class="toastTitle"
            >密码输入有误，请重新输入</view
          >
        </view>
        <button
          v-if="!(account && password)"
          class="submit"
        >
          登录
        </button>
        <button v-else class="submit noEmpty" @click="submitCount">登录</button>
      </view>
    </view>
  </view>
</template>

<script>
import { loginAPI, sendCodeAPI } from "@/api/user";
import { mapMutations } from "vuex";

export default {
  name: "UniAppIndex",

  data() {
    return {
      changeFlag: true,
      loginText: "手机号登录",
      changeFlag: true,
      loginText2: "账号登录",
      buttonText: "获取验证码",
      mobile: "",
      code: "",
      account: "xbsj001",
      password: 123456,
      eye: "eye-slash",
      pw: "password",
      errorMobile: false,
      errorCode: false,
      errorCount: false,
      errorPassword: false,
      timer: "",
    };
  },

  computed: {},

  methods: {
    ...mapMutations("user", ["setToken"]),
    changeLogin() {
      if (this.changeFlag) {
        this.changeFlag = false;
        this.loginText2 = "手机号登录";
        this.loginText = "账号登录";
      } else {
        this.changeFlag = true;

        this.loginText = "手机号登录";
        this.loginText2 = "账号登录";
      }
    },
    verifyMobile() {
      const reg = /^1[3-9][0-9]{9}$/;
      const flag = reg.test(this.mobile);
      if (!flag) {
        this.errorMobile = true;
      } else {
        this.errorMobile = false;
      }
      return flag;
    },
    verifyCode() {
      const reg = /^[0-9]{6}$/;
      const flag = reg.test(this.code);
      if (!flag) {
        this.errorCode = true;
      } else {
        this.errorCode = false;
      }
      return flag;
    },
    verifyCount() {
      const reg = /^[\w]{4,12}$/;
      const flag = reg.test(this.account);
      if (!flag) {
        this.errorCount = true;
      } else {
        this.errorCount = false;
      }
      return flag;
    },
    verifyPassword() {
      const reg = /^[\w]{6,12}$/;
      const flag = reg.test(this.password);
      if (!flag) {
        this.errorPassword = true;
      } else {
        this.errorPassword = false;
      }
      return flag;
    },
    changePw() {
      if (this.eye === "eye-slash") {
        this.eye = "eye-filled";
        this.pw = "text";
      } else {
        this.eye = "eye-slash";
        this.pw = "password";
      }
    },
    async submitMoblie() {
      if (!this.verifyMobile()) {
        return this.$utils.toast("手机号输入有误，请重新输入");
      }
      if (!this.verifyCode()) {
        return this.$utils.toast("验证码输入有误，请重新输入");
      }
      const { mobile:phone, code:verifyCode } = this;
      const res = await loginAPI({ verifyCode, phone });
      console.log(res);
    },
    async submitCount() {
      if (!this.verifyCount()) {
        return this.$utils.toast("账号输入有误，请重新输入");
      }
      if (!this.verifyPassword()) {
        return this.$utils.toast("密码输入有误，请重新输入");
      }
      const { account, password } = this;
      const data = { account, password };
      // console.log(11111111);
      // uni.request({
      //   url:"/login/account",
      //   method:'POST',
      //   data,
      //   success:(res)=>{
      //     console.log("res",res);
      //   }
      // })
      const { data: token, code } = await loginAPI(data);
      if (!code === 200) {
        return this.$utils.toast("账号或密码输入有误，请重新输入");
      }
      this.$utils.toast("登录成功");
      this.setToken(token);
      //   this.$store.commit('user/setToken',token)
      setTimeout(() => {
        uni.navigateBack({ delta: 1 });
      }, 500);
    },
    // 发送验证码
    async sendCode() {
      let timer
      if (!this.timer) {
        if(!this.verifyMobile()){
          return this.$utils.toast("手机输入有误，请重新输入");}
        const res = await sendCodeAPI(''+this.mobile);
        console.log(res);
        let time=60
        timer=setInterval(()=>{
          time--
          this.buttonText=time+'后获取'
        },1000)
        this.timer = setTimeout(() => {
          clearTimeout(this.timer)
          this.timer=''
          clearInterval(timer)
          this.buttonText= "重新验证码"
        }, 60000);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.login-content {
  width: 100vw;
  height: 98vh;
  color: #000;

  .main {
    width: 85vw;
    margin: 20px auto;

    h2 {
      display: flex;
      justify-content: space-between;
      font-size: 28px;
      image {
        width: 10px;
        height: 10px;
      }
      text {
        font-size: 16px;
        color: #ef4f3f;
      }
    }

    .loginInput {
      margin-top: 20px;

      .toastTitle {
        color: #ef4f3f;
        height: 30px;
        line-height: 30px;
        border: none;
        opacity: 0;
      }

      .show {
        opacity: 1;
      }

      view {
        height: 50px;
        display: flex;
        align-items: center;
        border-bottom: 2px solid #999;
        input {
          height: 40px;
        }
      }

      .error {
        border-bottom: 2px solid #ef4f3f;
        color: #ef4f3f;
      }

      .code {
        justify-content: space-between;
        button {
          font-size: 12px;
          height: 30px;
          list-style: 30px;
          margin: 0;
        }
      }
    }

    .submit {
      border-radius: 30px;
      margin-top: 30px;
      color: #fff;
      background-color: #fadcd9;
    }

    .noEmpty {
      background-color: #ef4f3f;
    }
  }
}
</style>
